<template>
  <div class="h5-container">
    <!-- 顶部分享 -->
    
    <div class="share-code">
        <!-- <a-button class="buttons"  type="outline" >
      <template #icon>
        <icon-undo />
      </template>
      返回
    </a-button> -->
      <div class="qrcodelist">
        <qrcode-vue :value="qrContent" class="code" level="H" render-as="svg" />
      </div>
      <p>
        扫一扫 <br />
        分享报告
      </p>
    
      <!-- <span> <icon-undo />返回</span> -->
    </div>
    <!-- 页面内容 -->
    <div class="warningtext" v-if="fromh5data.kilds==0&&fromh5data.answerNum==0">
        <!-- <a-alert  type="warning">
        
      </a-alert> -->
      <a-alert banner center type="warning">暂无学习内容,请尽快学习</a-alert>
      </div>
      
    <div class="beijing">
      
      <div class="bodytop">
        <div class="body-name">每日报告</div>
        <div class="body-ang">学生姓名：{{ topname.username }}</div>
        <div class="body-ang">
          <span> 学科：{{ topname.subjectName }}</span>
        </div>
        <div class="body-ang">{{ topname.commitTime }}</div>
        <div class="body-ang widthang">打印</div>
      </div>
      <div class="bodytops"></div>
    </div>
    <div class="bodyjianbian">
      <div class="body">
        <div class="neir">
          <div class="topdata">总评概览</div>
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">总评</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
         
          </div>
          <div class="neir-body">
            <div class="largelist">
              <van-circle
                v-model:current-rate="currentRate"
                :rate="topname.dom"
                :speed="100"
                size="14vw"
                :color="gradientColor"
                layer-color="#eeeeee"
                :stroke-width="110"
                :text="topname.text"
              />
        
            </div>
            <div>
              <div class="body-p">
                今日累计学习时长 <span class="timename">{{ todaytsd.tsd }}</span
                >全部已学知识点共有
                <span class="timelist">{{ todaytsd.kilds }}个</span> 检测出
                <span class="timedata">{{ todaytsd.frail_kl }}个</span>
                薄弱知识点。
              </div>

            </div>
          </div>
          <!-- <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">学习进度</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
      
            <div class="tablelist">
              <table>
                <tr>
                  <th>章节名称</th>
                  <th>已学会考点数</th>
                  <th>待学习考点数</th>
                </tr>
                <tr v-for="(item, index) in 5" :key="index">
                  <td class="lefttd">
                    <div>第一节 百分数（一）</div>
                    <div>
                      <a-progress
                        :percent="0.3"
                        color="rgba(87, 188, 248,1)"
                        size="large"
                        :style="{ width: '80%' }"
                      >
                        <template v-slot:text="scope">
                          <span class="progressname">1/1 小节 </span>
                        </template>
                      </a-progress>
                    </div>
                  </td>
                  <td>1</td>
                  <td>4</td>
                </tr>
              </table>
            </div>
          </div> -->
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">基础数据</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
            <van-row justify="space-between" :gutter="[5, 5]">
              <van-col span="4" class="colrow">
                已学知识点
                <div class="cloyuan">{{ fromh5data.kilds }}</div>
              </van-col>
              <van-col span="4" class="colrow">
                答题数
                <div class="cloyuan">{{ fromh5data.answerNum }}</div>
              </van-col>
              <van-col span="4" class="colrow">
                总视频数
                <div class="cloyuan">{{ fromh5data.VidNum }}</div>
              </van-col>
              <van-col span="4" class="colrow">
                正确率
                <div class="cloyuan">{{ fromh5data.accuracy }}%</div>
              </van-col>
            </van-row>
          </div>
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">考点关系图</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
            <div class="echartslist">
              <EchArts v-if="echartsdata" :echartsdata="echartsdata" />
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="body">
        <div class="neir">
          <div class="topdata">总评概览</div>
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">薄弱考点学习评价</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
          </div>
          <div class="neir-body">
            <div class="largelist">
              <van-circle
                v-model:current-rate="currentRater"
                :rate="30"
                :speed="100"
                size="15vw"
                :color="gradientColor"
                layer-color="#eeeeee"
                :stroke-width="110"
                text="30%"
              />
            
              <div class="master">
                <span style="color: rgba(255, 78, 78, 1); font-size: 1.2vw"
                  >学前</span
                >
                掌握程度
              </div>
            </div>
            <div><van-icon size="13vw" color="#40E7FE" name="exchange" /></div>
            <div class="largelist">
              <van-circle
                v-model:current-rate="currentRates"
                :rate="80"
                :speed="100"
                size="15vw"
                :color="gradientColor"
                layer-color="#eeeeee"
                :stroke-width="110"
                text="80%"
              />
        
              <div class="master">
                <span style="color: rgba(82, 213, 93, 1); font-size: 1.2vw"
                  >学后</span
                >
                掌握程度
              </div>
            </div>
          </div>
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">薄弱考点掌握详情</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
            <div class="zhanbody">
              您今日累计学习时长
              <span class="timename">{{ todaytsd.tsd }} </span>
            </div>
            <div class="datanamell">
              <icon-arrow-rise class="iconname" />代表进步幅度比较大的考点
            </div>
            
            <div class="tablelist">
              <table>
                <tr>
                  <th>知识点名称</th>
                  <th>考点名称</th>
                  <th>学前掌握率</th>
                  <th>学后掌握率</th>
                  <th>进步幅度</th>
                  <th>答题正确率</th>
                  <th>视频讲解</th>
                </tr>
                <tr v-for="(item, index) in 5" :key="index">
                  <td style="width: 12vw">
                    百分数和小数、分数的互化分数的互化分数的互化
                  </td>
                  <td>小数、分数化成百分数</td>
                  <td>
                    100 % <br />
                    <span class="masterone" v-if="item == 2"> 已掌握</span>
                    <span class="masteroneblue" v-if="item == 4">
                      掌握一般</span
                    >
                    <span class="masteronered" v-if="item != 4 && item != 2">
                      未掌握</span
                    >
                  </td>
                  <td>
                    20%
                    <br />
                    <span class="masterone" v-if="item == 2"> 已掌握</span>
                    <span class="masteroneblue" v-if="item == 4">
                      掌握一般</span
                    >
                    <span class="masteronered" v-if="item != 4 && item != 2">
                      未掌握</span
                    >
                  </td>
                  <td>70% <icon-arrow-rise class="icontop" /></td>
                  <td>70%</td>
                  <td><icon-play-circle /></td>
                </tr>
              </table>
            </div>
          </div>
    
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">考点学习用时</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
            <div>
              <div v-for="(item, index) in 5" :key="index">
                <div class="xiaoshu">小数、分数化成百分数</div>
                <div class="xiaoshujindu">
                  <div class="widthvan">
                    <div class="widthvanlist">
                      <van-progress :percentage="50" stroke-width="8" />
                    </div>
                    <div class="widthvanlist">
                      <van-progress
                        :percentage="20"
                        color="rgb(54, 220, 158)"
                        stroke-width="8"
                      />
                    </div>
                  </div>
                  <div class="topwidth">
                    <div class="topwidths">12分59秒</div>
                    <div class="topwidths">12分59秒</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="neir-top">
            <div class="tubiao">
              <div class="jianbianse"></div>
              <div class="fanghezi"></div>
              <div class="pingjianame">答题用时分析</div>
              <div class="fanghezi"></div>
              <div class="jianbianselist"></div>
            </div>
            <div class="echartslistdata">
              <EchArtsList />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 底部导航 -->
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import EchArts from "./echarts.vue";
import EchArtsList from "./EchArtslist.vue";
import { H5ShareSdateToday } from "@/api/h5layout";
import QrcodeVue from "qrcode.vue";
// H5Layout
const qrContent = ref("");
const route = useRoute();
const active = ref(0);
const percent = ref(0.5);
const currentRate = ref(0);
const currentRater = ref(0);
const currentRates = ref(0);
const  text = ref('sha')
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};
// 在 script 中
const props = defineProps({
  showHeader: { type: Boolean, default: true },
  showBack: { type: Boolean, default: true },
  showFooter: { type: Boolean, default: true },
  title: { type: String, default: "" },
});

const textWithStyle = computed(() => {
  return `<span style="font-size: 24px; color: red">30%</span>`;
});
const onClickLeft = () => {
  window.history.length > 1
    ? window.history.back()
    : (window.location.href = "/h5/home");
};
const fromeh5 = reactive({
  subjectId: 0,
  userId: 0,
});
// 基础数据
const fromh5data = reactive({
  VidNum: 0,
  accuracy: 0,
  answerNum: 0,
  kilds: 0,
});
//学生姓名
const topname = reactive({
  username: "",
  subjectName: 0,
  commitTime: 0,
  dom: 0,
  text:''
});
//当天学习数据
const todaytsd = reactive({
  tsd: "", //累计时长
  kilds: 0, //已学知识点
  frail_kl: 0, //薄弱知识点
});
const echartsdata = ref();
const H5daily = () => {
  H5ShareSdateToday(fromeh5).then((res: any) => {
    //echarts 数据
    echartsdata.value = res.zsd;
   
    //基础数据
    fromh5data.VidNum = res.bas.VidNum;
    fromh5data.accuracy = res.bas.accuracy;
    fromh5data.answerNum = res.bas.answerNum;
    fromh5data.kilds = res.bas.kilds;
    // 学生数据
    topname.username = res.top.realName;
    topname.subjectName = res.top.subjectName;
    topname.commitTime = res.top.commitTime;
    topname.dom = res.top.dom;
    topname.text = `${res.top.dom.toFixed(2)}%`;

    //当天学习数据 todaytsd.tsd
    // todaytsd.tsd = res.today.tsdtsd;
    todaytsd.kilds = res.today.kilds;
    todaytsd.frail_kl = res.today.frail_kl;
    let seconds = Number(res.today.tsd);
    let hours = Math.floor(seconds / 3600);
    seconds = res.today.tsd % 3600;
    let minutes = Math.floor(seconds / 60);
    seconds = seconds % 60;
    todaytsd.tsd = `${hours}小时${minutes}分钟${seconds}秒`;
  });
};

onMounted(() => {
 
  // qrContent.value = 'http://123.57.81.131:8080/'+route.fullPath
  qrContent.value = 'http://192.168.124.148:5173'+route.fullPath
  fromeh5.subjectId = route.query.subjectID;
  fromeh5.userId = route.query.userId;
  H5daily();
 
});
</script>

<style lang="less" scoped>
/* 如果使用 scoped 样式，需要穿透 */
::deep(.custom-circle .van-circle__text) {
  font-size: 58px !important;
}

.bodyjianbian {
  // margin-top: -2vw;
  background: linear-gradient(
    to bottom,
    rgba(173, 217, 242, 1) 0%,
    rgba(180, 216, 249, 1) 25%,
    rgba(203, 238, 253, 1) 50%,
    rgba(195, 219, 253, 1) 75%,
    rgba(203, 238, 253, 1) 100%
  );
}
.topdata {
  width: 20vw;
  position: absolute;
  top: -1.3vw;
  left: 50%-15vw;
  text-align: center;
  font-size: 2vw;
  color: #fff;
  line-height: 3vw;
  // margin: -20px auto 0vw;
  // padding: ;
  height: 3vw;
  // background-color: #fff;
  background-image: url("https://h5-yx.readboy.com/ai_learn_club_report/png/propaedeutic_header-385dd332.png");
  background-size: 100% 100%;
  // z-index: ;
}
.h5-container {
  display: flex;
  flex-direction: column;
  //   height: 100vh;
  overflow: hidden;
  // background: #d5ebf2;
  // background: #add9f2;

  .h5-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    &.has-header {
      padding-top: 46px;
    }

    &.has-footer {
      padding-bottom: 50px;
    }
  }
}
.master {
  margin-top: 0.5vw;
  font-size: 1vw;
}
/* 安全区域适配 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .h5-container {
    padding-bottom: env(safe-area-inset-bottom);

    .van-tabbar {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
.body {
  width: 70vw;
  margin: -5vw auto 0;
  // background-color: #0253ff;
  //   height: 100vh;
  //   background: #d5ebf2;
  // background: linear-gradient(90deg,rgba(213, 235, 242, 1) 0%, rgba(101, 219, 205, 1) 50%, rgba(83, 206, 237, 1) 100%);
}
.timename {
  font-size: 1.5vw;
  font-weight: 700;
  color: rgba(87, 188, 248);
}
.timelist {
  font-size: 1.5vw;
  font-weight: 700;
  color: rgba(82, 213, 93);
}
.timedata {
  font-size: 1.5vw;
  font-weight: 700;
  color: rgba(255, 78, 78);
}
.neir {
  //   width: 100%;
  // height: 1500px;
  position: relative;
  background-color: #fff;
  border-radius: 3vw;
  margin-bottom: 7vw;
  border: 1px;
  padding: 0 3vw;
}
.beijing {
  width: 100vw;
  // height: 00px;
  display: flex;
  background-color: rgba(173, 217, 242, 1);
}
.bodytop {
  // margin-left: 5vw;
  width: 40vw;

  // height: 300px;
  // background-image: url("https://h5-yx.readboy.com/ai_learn_club_report/png/dailyreport_top_icon-ed5ddf44.png");
  // background-size: 100% 100%;
  // height: 40vh;
}
.bodytops {
  // margin-left: 5vw;
  width: 60vw;
  // height: 300px;
  background-image: url("https://h5-yx.readboy.com/ai_learn_club_report/png/dailyreport_top_icon-ed5ddf44.png");
  background-size: 100% 100%;
  height: 25vw;
}
.body-name {
  text-align: right;
  margin-top: 3vw;
  font-weight: 700;
  font-size: 3vw;
  color: #0253ff;
}
.body-ang {
  text-align: right;
  margin-top: 0.5vw;
  font-size: 1.3vw;
  font-family: "宋体", SimSun, serif;
}
.widthang {
  width: 4vw;
  // height: 4vh;
  margin: 1vw 2vw;
  font-size: 1vw;
  padding: 0.5vw;
  // line-height: 4vh;
  float: right;
  text-align: center;
  border-radius: 1vw;
  background-color: #fff;
}
.neir-top {
  text-align: center;
  font-size: 1vw;
  font-weight: 700;
  // margin-top: ;
  padding: 2vw 0 0 0;
}
.neir-body {
  display: flex;
  // justify-content: space-between;
}
.largelist {
  width: 50%;
  //   height: 200px;
  text-align: center;
  //   background-color: #d46262;
}
.body-p {
  // margin: 0 auto;
  padding: 1.5vw;
  margin-top: 2vw;
  background-color: #eef9fb;
  width: 20vw;
  // height: 5vw;
  font-size: 1vw;
  line-height: 2.5vw;
  border-radius: 1vw;
}
// 表格

table {
  border-collapse: collapse; /* 合并边框 */
  width: 99%; /* 表格宽度 */
  height: 99%;
  margin: 3px auto; /* 居中显示 */

  overflow: hidden; /* 确保圆角可见 */
  border-radius: 1vw; /* 圆角效果 */
}

/* 所有单元格和表格边框 */

// table {
//   border-collapse: collapse; /* 合并边框 */
//   width: 300px;
//   margin: 20px auto;
//   border: 4px solid blue; /* 外层加粗边框 */
//   border-radius: 1vw; /* 圆角效果 */
//   overflow: hidden; /* 确保圆角可见 */
// }

/* 内部单元格边框 */
th,
td {
  border: 1px solid #3ba2e0;
  padding: 10px;
  text-align: center;
  background-color: #fff;
}

/* 表头样式 */
th {
  background-color: #57bcf8;
  color: #fff;
}
table tr:first-child td,
table tr:first-child th {
  border-top: none;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: none;
}
table tr td:first-child,
table tr th:first-child {
  border-left: none;
}
table tr td:last-child,
table tr th:last-child {
  border-right: none;
}
.tablelist {
  background-color: #57bcf8;
  border-radius: 1vw;
  // padding: 1;
  // height: 300px;
  padding: 0 0 1px 0;
  font-weight: 500;
}
.lefttd {
  text-align: left;
}
.masterone {
  color: rgba(82, 213, 93, 1);
}
.masteroneblue {
  color: rgba(87, 188, 248, 1);
}
.masteronered {
  color: rgba(255, 78, 78, 1);
}
.icontop {
  color: rgba(255, 78, 78, 1);
}
.progressname {
  font-size: 1.3vw;
}
.tubiao {
  // height: 3vw;
  display: flex;
  justify-content: center;
  margin: 2vw 0 3.5vw 0;
  // line-height: 3vw;
  // background-color: pink;
}
.pingjianame {
  margin: 0 1vw;
}
.jianbianse {
  height: 0.8vw;
  width: 10vw;
  border-top: 0.3vw solid;
  border-bottom: 0.3vw solid;
  border-image: linear-gradient(to right, #fff, #b1d0fe) 1;
  // background-color: #0253ff;
  // background-color: pink;
  // margin-right: 1vw;
}

.jianbianselist {
  height: 0.8vw;
  width: 10vw;
  border-top: 0.3vw solid;
  border-bottom: 0.3vw solid;
  border-image: linear-gradient(to right, #b1d0fe, #fff) 1;
}
.fanghezi {
  width: 1.3vw;
  height: 1.3vw;
  border-radius: 0.3vw;
  margin: 0 1vw;
  background-color: #b1d0fe;

  transform: rotate(45deg); /* 顺时针旋转90度 */
}
.spanxian {
  width: 15vw;
  height: 0.2vw;
  margin-right: 1vw;
  display: inline-block;

  background: linear-gradient(to right, #fff, #b1d0fe);
}
//基础数据
.colrow {
  background-color: #e0fdf0;
  // width: 100%;
  // height:3vw;
  position: relative;
  padding: 1.5vw 0;
  // line-height: 1.5vw;
  border-radius: 2vw;
  font-size: 1vw;
  text-align: center;
  //
}
.cloyuan {
  position: absolute;
  left: (50% - 15%);
  top: -2.5vw;
  width: 3vw;
  height: 3vw;
  color: #fff;
  font-size: 1vw;
  text-align: center;
  line-height: 3vw;
  border-radius: 3vw;
  background-color: #53dfaa;
}
.echartslist {
  width: 100%;
  height: 50vh;
  // background-color: pink;
}
.echartslistdata {
  width: 100%;
  height: 30vh;
}
.zhanbody {
  margin-top: 1vw;
  font-size: 0.8vw;
  // width: 100%;
  padding: 2vw;
  border-radius: 1vw;
  background-color: #e0fdf0;
}
.datanamell {
  text-align: left;
  font-size: 1vw;
  margin-top: 1vw;
}
.iconname {
  color: red;
}
.share-code {
  // position: absolute;
  text-align: center;
  position: fixed;
  left: 2vw;
  top: 2vw;
  width: 5vw;
  height: 5vw;
  color: rgb(9, 16, 105);
  // background-color: pink;
  font-size: 1.2vw;
  // z-index: 1;
}
.code {
  width: 100%;
  height: 100%;
  /* 确保二维码内容完整显示 */
  //  object-fit: contain;
}
.code svg {
  width: 100%;
  height: 100%;
}
.qrcodelist {
  width: 5vw;
  height: 5vw;
  margin-bottom: 1vw;
  border: 0.2vw solid #fff;
  // background-color: red;
}
.xiaoshu {
  text-align-last: left;
  margin-top: 1vw;
}
.xiaoshujindu {
  display: flex;
  justify-content: space-between;
}
.topwidth {
  margin-top: 1vw;
  height: 1.5vw;
  font-size: 1vw;
  // background-color: pink;
}
.buttons{
  margin: 0 0 2vw 0;
}
.topwidths {
  margin-top: 1vw;
  // height: 1.5vw;
  font-size: 1vw;
  font-weight: 500;
  // background-color: pink;
}
.widthvan {
  margin-top: 1vw;
  width: 35vw;
  // background-color: pink;
}
.widthvanlist {
  margin-top: 1.5vw;
  width: 35vw;
}

@media (max-width: 768px) {
  .cloyuan {
    position: absolute;
    left: (25%);
    top: -5vw;
    width: 6vw;
    height: 6vw;
    font-size: 2vw;
    text-align: center;
    color: #fff;
    line-height: 6vw;
    border-radius: 3vw;
    background-color: #53dfaa;
  }
  .iconname {
    color: red;
    font-size: 2vw;
  }
  .body-name {
    margin-top: 2vw;
    font-weight: 700;
    font-size: 4vw;
    color: #0253ff;
  }
  .echartslist {
    width: 100%;
    height: 30vh;
    // background-color: pink;
  }
  .echartslistdata {
    width: 100%;
    height: 30vh;
  }
  .topdata {
    width: 20vw;
    position: absolute;
    top: -1.3vw;
    left: 50%-11vw;
    text-align: center;
    font-size: 2vw;
    color: #fff;
    line-height: 3vw;
    // margin: -20px auto 0vw;
    // padding: ;
    height: 3vw;
    // background-color: #fff;
    background-image: url("https://h5-yx.readboy.com/ai_learn_club_report/png/propaedeutic_header-385dd332.png");
    background-size: 100% 100%;
    // z-index: ;
  }
  .body {
    width: 88vw;
    margin: -5vw auto 0;
    // background-color: #0253ff;
    //   height: 100vh;
    //   background: #d5ebf2;
    // background: linear-gradient(90deg,rgba(213, 235, 242, 1) 0%, rgba(101, 219, 205, 1) 50%, rgba(83, 206, 237, 1) 100%);
  }
  .share-code {
    // position: absolute;
    text-align: center;
    position: fixed;
    left: 2vw;
    top: 3vw;
    width: 10vw;
    height: 10vw;
    color: rgb(9, 16, 105);
    // background-color: pink;
    font-size: 1.2vw;
    // z-index: 1;
  }
  .qrcodelist {
    width: 10vw;
    height: 10vw;
    margin-bottom: 1vw;
    border: 0.2vw solid #fff;
    // background-color: red;
  }
}
</style>
